/**
 *
 * @param obj
 * @constructor
 *      index
 *      imageArray
 *      maskId
 *
 */

// 先定义一些
function ImagePrev(obj) {
    this.currentPosition = obj.index ? obj.index : 0;
    this.imageArray = obj.imageArray ? obj.imageArray : [];
    this.imageArray = this.initImageArray(this.imageArray);
    this.maskId = obj.maskId ? obj.maskId : "ImagePrev" + guid();
    this.initDom();
    this.initListener();
}

ImagePrev.prototype = {
    initDom: function (obj) {
        // 创建mask
        var html = "";
        html += "<div id='" + this.maskId + "' class='image-prev-mask'>"
        html += "<div class='anim-box'>";
        // html += "<img src='"+this.imageArray[this.currentPosition].src+"' alt=''>";
        html += "</div>";
        html += "<div class='prev'><</div>";
        html += "<div class='next'>></div>";
        html += "</div>"

        document.body.className = "full-screen";
        document.body.innerHTML = (html + document.body.innerHTML);

        this.mask = document.getElementById(this.maskId);
        this.startAnim(this.currentPosition);
    },
    startAnim: function (position) {
        var animBox = this.mask.getElementsByClassName("anim-box")[0];
        // animBox.children[0].src = this.imageArray[this.currentPosition].src;
        animBox.innerHTML = "<img src='"+this.imageArray[this.currentPosition].src+"'/>"
        animBox.style.width = this.imageArray[position].width;
        animBox.style.height = this.imageArray[position].height;
    },

    initListener: function () {
        var that = this;
        this.mask.children[1].addEventListener('click',function () {
            that.prev();
        })

        this.mask.children[2].addEventListener('click',function () {
            that.next();
        })
    },

    initImageArray: function (array) {
        var lastArray = [];
        var screenWidth = document.body.offsetWidth;
        for (var i = 0; i < array.length; i++) {
            var obj = array[i];
            var img = new Image();
            img.src = obj;
            if (img.complete) {
                var width = 0;
                if (screenWidth > 768) {
                    width = (img.width >= screenWidth ? screenWidth * 0.8 : img.width);
                } else {
                    width = (img.width >= screenWidth ? screenWidth : img.width);
                }

                lastArray.push({
                    src: obj,
                    width: width.toFixed(2)+'px',
                    height: (img.height * parseInt(width) / img.width).toFixed(2)+'px'
                });
            }
        }

        console.log(lastArray);
        return lastArray;
    },

    next : function () {
        if (this.currentPosition < this.imageArray.length - 1){
            this.currentPosition++;
            this.startAnim(this.currentPosition);
        }
    },

    prev:function () {
        if (this.currentPosition>0){
            this.currentPosition --;
            this.startAnim(this.currentPosition);
        }
    }
}

//用于生成uuid
function S4() {
    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
}
function guid() {
    return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
}